<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>jsonp处理跨域</h1>
    <button id="btn">发送请求</button>
    <script>
        function callback (data){//后端调用后，传的实参，用形参接收传的数据
            console.log(data)
        }
        const btn =document.querySelector('#btn')
        let oscript =null;//第一次为null，第一次点击时，进不去下面这个判断

        btn.onclick = function(){
            if(oscript){//因为每发一次请求，body中就会新增一个script标签，所以要做一个判断，如果下一次点击时，页面中有script，就把它从页面中移除
                // 1.document.body.removeChild(oScript);
                // 删除某个元素
                oscript.remove();
            }
            oscript =document.createElement('script')
            oscript.src ='http://127.0.0.1:8889/user?bb=callback'//利用script标签天生具有跨域的能力来处理，把script的src属性，地址设置为自己搭的服务器的端口，路径也是服务器的路径，查询字符串上写用来获取数据的回调函数
            document.body.appendChild(oscript) 
        }

    </script>
</body>
</html>